import React, { useState } from "react";
import ReactDOM from "react-dom";

import "../src/style/index.css";
import ReactSketchRuler from "../src/index";

import "./app.css";

function App() {
  const [hLines, updateHLines] = useState([100, 200]);
  const [vLines, updateVLines] = useState([100, 200]);

  const onLineAdd = (offset, vertical) => {
    if (vertical) {
      updateVLines((lines) => [...lines, offset]);
    } else {
      updateHLines((lines) => [...lines, offset]);
    }
  };

  return (
    <div className={"app"}>
      <ReactSketchRuler
        hLines={hLines}
        vLines={vLines}
        onLineAdd={onLineAdd}
      ></ReactSketchRuler>
    </div>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<App />, root);
